<template>
  <div >
  <swiper
   :indicator-dots="indicatorDots"
   :autoplay="autoplay" 
   :interval="interval"
   :duration="duration">
  <block v-for="(item,index) in currentItem.imgUrls" :key="index">
    <swiper-item>
      <image :src="item" class="image" width="355" height="150"/>
    </swiper-item>
  </block>
</swiper>
 <div class="detail">
 
  <p><span class="title">责任描述:</span>{{currentItem.duty}}</p>

	<p><span class="title">项目简介:</span>{{currentItem.introduction}}</p>
	
	</div>	
  </div>
</template>

<script>
import { formatTime } from '@/utils/index'
import card from '@/components/card'

export default {
  components: {
    card
  },

  data () {
    return {
     
    indicatorDots: true,
    autoplay: true,
    interval: 5000,
    duration: 1000,
    itemDetail:[{
    	"duty":"负责前端部分",
    	"introduction":" 使用Vue2+VueRouter2+webpack+Axios+vuex 技术方案，分首页，分类，优惠券，购物车，我的 5个板块，实现了注册、登录、商品分类、新闻资讯、广告、商品搜索、购物车、下单、结算、订单状态、收货地址管理、选择门店、个人资料修改等功能</p>",
    	"imgUrls": [
						      'http://img02.tooopen.com/images/20150928/tooopen_sy_143912755726.jpg',
						      'http://img06.tooopen.com/images/20160818/tooopen_sy_175866434296.jpg',
						      'http://img06.tooopen.com/images/20160818/tooopen_sy_175833047715.jpg'
						    ]
    },{
    	"duty":"独立完成",
    	"introduction":"游戏部分使用three.js 3D引擎制作而成，使用h5，css，layui，jq等制作页面样式与交互，使用echarts.js,OBJLoader.js，stats.js，detector.js等插件制作部分功能，实现了赛车漂移、复位、视角切换、难度选择、相机跟随、游戏地图、碰撞检测、聊天室、游戏音效、时速表、集氮气、计时、任务系统、场景更换，车库等功能。\
    	宣传网站主要使用Bootstrap,jQuery等技术，可以在手机端与pc端展示分为首页，游戏介绍，更多游戏，极速漂移等几个模块，实现了轮播图，游戏截图展示，发送邮件，评论，分享等功能",
    	"imgUrls": [
						      'http://img02.tooopen.com/images/20150928/tooopen_sy_143912755726.jpg',
						      'http://img06.tooopen.com/images/20160818/tooopen_sy_175866434296.jpg',
						      'http://img06.tooopen.com/images/20160818/tooopen_sy_175833047715.jpg'
						    ]
    },{
    	"duty":"前端部分",
    	"introduction":"该项目使用了layerui+jQuery等技术，可以在手机端与pc端展示，用于沙县税务局的无纸化填表实现了关键字搜索，公告栏，更换皮肤，全屏展示，打印等功能，为用户提高查表，对照表，填表,打印等服务，从而节省用户时间，降低填表难度，大幅度提高了服务效率.",
    	"imgUrls": [
						      'http://img02.tooopen.com/images/20150928/tooopen_sy_143912755726.jpg',
						      'http://img06.tooopen.com/images/20160818/tooopen_sy_175866434296.jpg',
						      'http://img06.tooopen.com/images/20160818/tooopen_sy_175833047715.jpg'
						    ]
    },
    {
    	"duty":"负责部分页面的制作，新手引导，每日奖励，兑换礼包等功能",
    	"introduction":"该项目主要使用了pixi.js2D引擎制作而成，海盗是一款H5策略小游戏，玩家各有10艘船舶，双方互相攻击对方的船舶，率先击落对面的10艘船舶者获胜，该游戏已在各大游戏平台上架.",
    	"imgUrls": [
						      'http://img02.tooopen.com/images/20150928/tooopen_sy_143912755726.jpg',
						      'http://img06.tooopen.com/images/20160818/tooopen_sy_175866434296.jpg',
						      'http://img06.tooopen.com/images/20160818/tooopen_sy_175833047715.jpg'
						    ]
    },{
    	"duty":"前端部分",
    	"introduction":"该项目类似于ofo单车的APP，但是车是要从各大商店中取，使用者可以自行选择商店取车，使用后归还 ",
    	"imgUrls": [
						      'http://img02.tooopen.com/images/20150928/tooopen_sy_143912755726.jpg',
						      'http://img06.tooopen.com/images/20160818/tooopen_sy_175866434296.jpg',
						      'http://img06.tooopen.com/images/20160818/tooopen_sy_175833047715.jpg'
						    ]
    },{
    	"duty":"独立完成",
    	"introduction":"该项目是为了实现沙县税务局的无纸化填表,为用户提供查表，对照表，填表,打印等服务，从而节省用户时间，降低填表难度，大幅度提高了服务效率.",
    	"imgUrls": [
						      'http://img02.tooopen.com/images/20150928/tooopen_sy_143912755726.jpg',
						      'http://img06.tooopen.com/images/20160818/tooopen_sy_175866434296.jpg',
						      'http://img06.tooopen.com/images/20160818/tooopen_sy_175833047715.jpg'
						    ]
    }
    
    
    
    ],
    currentItem:{}
    }
  },
	methods:{

	},
  onLoad () {
  	const index=this.$mp.query.index;
  	this.currentItem=this.itemDetail[index];
  }

}
</script>

<style>
.detail{padding: 0 5%;}
.title{font-size: 19px;font-weight: bold;margin-right: 5px;}
.image{ width: 98%;margin-left: 1%;}
h2{margin: 20px 0 10px 10px; }
p{font-size: 18px; opacity: 0.6;word-break: break-all;margin: 10px;}
</style>
